<template>
    <!-- <page-wrap :backFn="backfn"> -->
        <div class="container">
            <page-header v-bind="headerProps" :backFn="backfn"/>
            <div class="password-container">
            <div class="cm-account-form" style="padding-top: 40px;">
                <van-field class="cm-vant-cell" v-model="postForm.mobile" type="digit" label="手机号" label-class="cm-vant-cell__label" name="accout" maxlength="11" placeholder="请输入手机号" autocomplete="off"  />
                <van-field class="cm-vant-cell" v-model="postForm.userCode" label="用户名" label-class="cm-vant-cell__label" name="accout" maxlength="11" placeholder="请输入用户名" autocomplete="off"  />
                <van-field class="cm-vant-cell" v-model="postForm.oldPwd" type="password" label="旧密码" label-class="cm-vant-cell__label" placeholder="请输入密码" autocomplete="new-password"  />
                <van-field class="cm-vant-cell" v-model="postForm.newPwd" type="password" label="新密码" label-class="cm-vant-cell__label" placeholder="请输入密码" autocomplete="new-password"  />
                <van-field 
                    class="cm-vant-cell" 
                    v-model="postForm.confirmPassword" 
                    :type="passwordVisible ? 'password': 'text'" 
                    label="确认密码"
                    label-class="cm-vant-cell__label"
                    placeholder="请输入密码" 
                    autocomplete="new-password" 
                    :right-icon="passwordVisible?i_password_hide:i_password_show" 
                    @click-right-icon="passwordVisible=!passwordVisible"
                ></van-field>

                <z-button-group top="40">
                    <z-button bold @click="onSubmit">确定</z-button>
                    <z-button plain top="10" @click="router.back()">取消</z-button>
                </z-button-group>
            </div>
        </div>
        </div>
        
    <!-- </page-wrap> -->
</template>
<script setup>
import { showToast } from 'vant';
import Api from '@/api'
import i_password_hide from '@/assets/images/account/i_password_hide.png'
import i_password_show from '@/assets/images/account/i_password_show.png'

const router = useRouter()

const postForm = reactive({
    userCode:undefined,
    mobile: undefined,
    oldPwd: undefined,
    newPwd: undefined,
    confirmPassword: undefined,
})
const passwordVisible = ref(true)

const isAllValuesPresent = computed(() => {
    return Object.values(postForm).every(value => value !== undefined && value !== null && value !== '');
});
const backfn = ()=>{
    window.close()
}

const onSubmit = function() {
    console.log(postForm);
    // if (!unref(isAllValuesPresent)) {
    //     showToast('请完善信息')
    //     return
    // }
    if(!postForm.newPwd || !postForm.oldPwd || !postForm.confirmPassword ){
        showToast('请输入密码！')
        return
    }
    if(!postForm.userCode ){
        showToast('请输入用户名！')
        return
    }
    if(postForm.newPwd !== postForm.confirmPassword){
        showToast('新密码和确认不符，请重新输入！')
        return
    }
    console.log(postForm);
    Api.Common.AppEditPwd.Do(postForm ).then(res => {
        showToast('修改成功,预计10分钟左右生效')
        setTimeout(() => {
            // router.back()
            window.close();
        }, 2000);
       
    })

}
const oninit = ()=>{
    const url = window.location.href;

    // 从 URL 中提取查询字符串部分
    const queryString = url.split('?')[1];  // 获取问号后面的部分

    if (queryString) {
        // 使用 URLSearchParams 解析查询字符串
        const urlParams = new URLSearchParams(queryString);

        // 获取查询参数的值
        const userCode = urlParams.get('userCode');
        const mobile = urlParams.get('mobile');
        postForm.userCode = userCode
        postForm.mobile = mobile
    }

}
oninit()
</script>
<style scoped lang="scss">
.password-container {
    padding: 0 33px;
}
</style>